<template>
    <transition name="index">
        <div class="body">
            <me-head></me-head>
            <swipers></swipers>
            <me-class :indexClass="indexClass"></me-class>
            <me-con></me-con>
            <me-limit></me-limit>
            <me-course :allparentinfo="allparentinfo"></me-course>
            <me-footers></me-footers>
        </div>
    </transition>
</template>
<script>
import meCourse from "./components/courseBlock";
import meLimit from "./components/Grabactivity";
import meCon from "./components/content";
import meHead from "./components/header";
import meFooters from "./components/footer";
import meClass from "./components/class";
import swipers from "../../components/swiper";
import allparentinfo from "../../assets/allparentinfo.json";
export default {
  data() {
    return {
      allparentinfo: {},
      indexClass: {}
    };
  },
  components: {
    meHead,
    swipers,
    meClass,
    meCon,
    meLimit,
    meCourse,
    meFooters
  },
  methods: {
    changeIndexClass: function() {
      var newIndexClass = [];
      allparentinfo.indexClass.forEach((item, index) => {
        let newClassImg = "../../../../static/mevue/" + item.showClassImg;
        let params = {
          showClassImg: newClassImg,
          showClassName: item.showClassName,
          classPid: item.classPid
        };
        newIndexClass.push(params);
      });
      this.indexClass = newIndexClass;
      this.allparentinfo = allparentinfo.allparentinfo;
    }
  },
  mounted() {
    this.changeIndexClass();
  }
};
</script>
<style lang="sass" scoped>
  .body
    background: #eee
    padding-top: 44px
    padding-bottom: 70px
  html 
    width: 100%
    height: 100%
    font-size: 62.5%
    color: #474747
  body 
    font-family: 'Microsoft YaHei', 'Hiragino Sans GB', 'Arail'
    padding-top: 44px
    padding-bottom: 6rem
    -webkit-box-sizing: border-box
    margin: 0
  body.gray 
    background: #eeeeee
  button,input,textarea 
    border: none
    -webkit-outline: none
    outline: none
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    -webkit-appearance: none
    border-radius: 0
    padding: 0
  .fl 
    float: left
  .fr 
    float: right
  a 
    color: #474747
    text-decoration: none
  a:focus,a.active,a:hover 
    text-decoration: none

  ul,p,h1,h2,h3,h4,h5,h6 
    padding: 0
    margin: 0
  li 
    list-style: none

  em,i 
    font-style: normal

  img 
    vertical-align: middle
  .index-enter-active, .index-leave-active
    transition: opacity 0.2s
  .index-enter, .index-leave-active
    opacity: 0
</style>
